<template>
	<div class="edu-page-warp">
		<div class="edu-page-title">{{ $t('message.filterCondition') }}</div>
		<el-card shadow="never" body-style="padding: 24px;">
			<el-form :model="condition" label-position="left" label-width="100px">
				<el-row :gutter="24">
					<el-col :span="6">
						<el-form-item :label="  $t('auditLog.auditName') ">
							<el-input v-model="condition.auditname" :placeholder="$t('auditLog.inputAuditName')"/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="模块名称">
							<el-input v-model="condition.modulename" placeholder="请输入模块名称"/>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item :label="  $t('auditLog.operationUser') ">
							<el-input v-model="condition.keyWord" :placeholder="$t('auditLog.inputOperationUser')"/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="  $t('auditLog.terminalIp') ">
							<el-input v-model="condition.terminalip" :placeholder="$t('auditLog.inputterminalIp')"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="6">
						<el-form-item label="被操作对象">
							<el-input v-model="condition.user" :placeholder="$t('auditLog.inputUser')"/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="  $t('auditLog.level') ">
							<el-select v-model="condition.level" style="width: 100%">
								<el-option
									v-for="item in options.level"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="  $t('auditLog.operationType') ">
							<el-select v-model="condition.operationtype" style="width: 100%">
								<el-option
									v-for="item in options.operationType"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="  $t('auditLog.profile') ">
							<el-input v-model="condition.profile" :placeholder="$t('auditLog.inputProfile')"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="6">
						<el-form-item label=" 执行结果 ">
							<el-select v-model="condition.code" style="width: 100%">
								<el-option
									v-for="item in options.code"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('message.startTime') " class="no-bottom">
							<el-date-picker
								v-model="condition.startDate"
								:picker-options="pickerOptions"
								type="datetime"
								:placeholder=" $t('message.plsSelect') + $t('message.startTime')"
								format="yyyy/MM/dd HH:mm:ss"
								value-format="yyyy-MM-dd HH:mm:ss"
								align="right"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('message.endTime') " class="no-bottom">
							<el-date-picker
								v-model="condition.endDate"
								:picker-options="pickerOptions"
								type="datetime"
								:placeholder="$t('message.plsSelect')+$t('message.endTime')"
								format="yyyy/MM/dd HH:mm:ss"
								value-format="yyyy-MM-dd HH:mm:ss"
								align="right"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<div class="float-right no-bottom no-right">
							<el-button type="primary" @click="reset">{{ $t('message.reset') }}</el-button>
							<el-button type="primary" @click="submit">{{ $t('message.filter') }}</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<div class="edu-page-title mg-top">{{ $t('auditLog.logList') }}</div>
		<el-card shadow="never" body-style="padding: 24px;">
			<div class="edu-opertion-bar">
				<div class="float-right">
					<span style="color: blue" plain>{{"从 "+timeStr.startStr+ " 到 "+timeStr.endStr+ " 止" }}</span>
				</div>
			</div>
			<el-table :data="tableData" style="width: 100%" stripe>
				<el-table-column :label="$t('auditLog.auditName')">
					<template slot-scope="props">
						<el-popover
							placement="bottom-start"
							width="200"
							trigger="hover"
							:content="props.row.auditname"
						>
							<span slot="reference">{{ props.row.auditname }}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="模块名称">
					<template slot-scope="props">
						<el-popover
							placement="bottom-start"
							width="200"
							trigger="hover"
							:content="props.row.modulename"
						>
							<span slot="reference">{{ props.row.modulename }}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column :label=" $t('auditLog.createTime')">
					<template slot-scope="props">
						<el-popover
							placement="bottom-start"
							width="200"
							trigger="hover"
							:content="props.row.createtime"
						>
							<span slot="reference">{{props.row.createtime}}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="操作用户工号">
					<template slot-scope="props">
						<el-popover
							placement="bottom-start"
							width="200"
							trigger="hover"
							:content="props.row.operationuser"
						>
							<span slot="reference">{{props.row.operationuser}}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="用户姓名">
					<template slot-scope="props">
						<el-popover
							placement="bottom-start"
							width="200"
							trigger="hover"
							:content="props.row.userName"
						>
							<span slot="reference">{{props.row.userName}}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="用户所在部门">
					<template slot-scope="props">
						<el-popover
							placement="bottom-start"
							width="200"
							trigger="hover"
							:content="getDeptStr(props.row.deptId)"
						>
							<span slot="reference">{{getDeptStr(props.row.deptId)}}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="被操作对象">
					<template slot-scope="props">
						<el-popover placement="bottom-start" width="200" trigger="hover" :content="props.row.user">
							<span slot="reference">{{props.row.user}}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column :label="$t('auditLog.terminalIp')">
					<template slot-scope="props">
						<el-popover
							placement="bottom-start"
							width="200"
							trigger="hover"
							:content="props.row.terminalip"
						>
							<span slot="reference">{{props.row.terminalip}}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column :label="$t('auditLog.level')">
					<template slot-scope="props">
						<!--   <el-popover
                placement="bottom-start"
                width="200"
                trigger="hover"
                :content="getLevelStr(props.row.level)"
						>-->
						<span slot="reference">{{getLevelStr(props.row.level)}}</span>
						<!--   </el-popover> -->
					</template>
				</el-table-column>
				<el-table-column :label="$t('auditLog.profile')">
					<template slot-scope="props">
						<el-popover placement="bottom-start" width="200" trigger="hover" :content="props.row.profile">
							<span slot="reference">{{props.row.profile}}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column :label="$t('auditLog.operationType')">
					<template slot-scope="props">
						<span slot="reference">{{getOperationTypeStr(props.row.operationtype)}}</span>
					</template>
				</el-table-column>
				<el-table-column label="执行结果">
					<template slot-scope="props">
						<el-tag v-if="props.row.code == 200" type="success">操作成功</el-tag>
						<el-tag v-if="props.row.code != 200" type="danger">操作失败</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('message.operating')">
					<template slot-scope="scope">
						<el-button
							type="text"
							@click="getDetailById(scope.row.auditid)"
							size="mini"
						>{{ $t('message.detail') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="edu-pagination">
				<div class="float-right">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="page.pageNum_"
						:page-sizes="[10, 20, 40, 80, 100]"
						:page-size="page.pageSize_"
						layout="total, sizes, prev, pager, next, jumper"
						:total="page.total_"
						style="float:right;margin-top:10px"
					></el-pagination>
				</div>
			</div>
		</el-card>
		<el-dialog
			:title="$t('auditLog. auditLog')+$t('message.detail')"
			width="60%"
			class="gCourseAddDialog"
			:visible.sync="showDialog"
			:close-on-click-modal="false"
		>
			<el-form :model="auditLog" label-position="top" label-width="300px">
				<el-container>
					<el-main style="padding: 10;">
						<!--  <el-col :span="8">
              <el-form-item :label="  $t('auditLog.auditId') ">
               <el-input v-model="auditLog.auditid" readonly/>
            </el-form-item>
						</el-col>-->
						<el-col :span="6">
							<el-form-item :label="  $t('auditLog.auditName') ">
								<el-input v-model="auditLog.auditname" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label=" 模块名称 ">
								<el-input v-model="auditLog.modulename" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item :label="  $t('auditLog.operationUser') ">
								<el-input v-model="auditLog.operationuser" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="被操作对象">
								<el-input v-model="auditLog.user" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item :label="  $t('auditLog.terminalIp') ">
								<el-input v-model="auditLog.terminalip" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item :label="  $t('auditLog.level') ">
								<el-input v-model="auditLog.level" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item :label="  $t('auditLog.operationType') ">
								<el-input v-model="auditLog.operationtype" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item :label="  $t('auditLog.profile') ">
								<el-input v-model="auditLog.profile" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="  执行结果 ">
								<el-input v-model="auditLog.code" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="创建时间 " class="no-bottom">
								<el-date-picker
									style="width: 100%;"
									v-model="auditLog.createtime"
									type="datetime"
									format="yyyy/MM/dd HH:mm"
									align="right"
									readonly
								/>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item :label="$t('auditLog.detail')">
								<el-input readonly type="textarea" rows="2" v-model="auditLog.detail"/>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="数据">
								<el-input readonly type="textarea" rows="4" v-model="auditLog.params"/>
							</el-form-item>
						</el-col>
					</el-main>
				</el-container>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="cancelDialog">{{$t("message.close")}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import {
	getAuditLogById,
	getAuditLogList,
	getHorizonTime
} from "common/src/api/auditLog";
import { findAllDeptList } from "common/src/api/user";
export default {
	name: "auditLog",
	data() {
		return {
			showDialog: false,
			page: {
				pageNum_: 0,
				pageSize_: 10,
				total_: 0
			},
			condition: {
				auditname: "",
				modulename: "",
				operation: "",
				user: "",
				terminalip: "",
				level: "",
				profile: "",
				keyWord: "",
				startDate: "",
				endDate: "",
				code: 2
			},
			timeStr: {
				startStr: "",
				endStr: ""
			},
			auditLog: {},
			//不能写大括号，神坑
			tableData: [],
			options: {
				level: [
					//日志等级
					{
						value: "",
						label: "全部"
					},
					{
						value: 1,
						label: "重要"
					},
					{
						value: 2,
						label: "一般"
					}
				],
				code: [
					{
						value: 2,
						label: "全部"
					},
					{
						value: 1,
						label: "成功"
					},
					{
						value: 0,
						label: "失败"
					}
				],
				operationType: [
					//操作類型
					{
						value: "",
						label: "全部"
					},
					{
						value: "I",
						label: "增加"
					},
					{
						value: "D",
						label: "删除"
					},
					{
						value: "U",
						label: "修改"
					},
					{
						value: "R",
						label: "查询"
					}
				],
				dept: []
			},
			pickerOptions: {
				shortcuts: [
					{
						text: "今天",
						onClick(picker) {
							picker.$emit("pick", new Date());
						}
					},
					{
						text: "昨天",
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit("pick", date);
						}
					},
					{
						text: "一周前",
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit("pick", date);
						}
					}
				]
			}
		};
	},
	methods: {
		initOption() {
			findAllDeptList().then(res => {
				if (res.code == 200) {
					for (const item of res.data) {
						this.options.dept.push({
							label: item.deptName,
							value: item.deptCode
						});
					}
					this.getAuditLogInfo();
				}
			});
		},
		getDeptStr(data) {
			if (!data) return "";
			let str = "";
			const temp = Array.from(new Set(data.split(",")));
			for (const item of temp) {
				for (const deptStr of this.options.dept) {
					if (item === deptStr.value) {
						str += deptStr.label + ",";
					}
				}
			}
			if (str != "") {
				str = str.slice(0, str.length - 1);
			}
			return str;
		},
		getOperationTypeStr(val) {
			if (val == "I") return "添加";
			else if (val == "D") return "删除";
			else if (val == "U") return "修改";
			else if (val == "R") return "查询";
			else return "";
		},
		getLevelStr(val) {
			if (val == 1) return "重要";
			else if (val == 2) return "一般";
			else return "";
		},
		getDetailById(id) {
			this.showDialog = true;
			getAuditLogById(id).then(response => {
				if (response.code == 200) {
					this.auditLog = response.data;
					this.auditLog.operationtype = this.getOperationTypeStr(
						this.auditLog.operationtype
					);
					this.auditLog.level = this.getLevelStr(this.auditLog.level);
				} else throw response.code;
			});
		},

		getTimeStr() {
			getHorizonTime().then(res => {
				if (res.code == 200) {
					if (!res.data) return;
					this.timeStr = res.data;

					this.timeStr.startStr = this.timeStr.startTime.substr(
						0,
						19
					);
					this.timeStr.endStr = this.timeStr.endTime.substr(0, 19);
					// console.log(this.timeStr.startStr+ "   "+this.timeStr.endStr )
				}
			});
		},

		getAuditLogInfo() {
			console.log(this.condition);

			getAuditLogList(
				this.page.pageNum_,
				this.page.pageSize_,
				this.condition
			).then(response => {
				if (response.code == 200) {
					this.tableData = response.data.list;
					this.page.pageNum_ = response.data.pageNum_;
					this.page.pageSize_ = response.data.pageSize_;
					this.page.total_ = response.data.total_;
				} else throw response.code;
			});
			this.getTimeStr();
		},
		handleSizeChange(val) {
			this.page.pageSize_ = val;
			this.getAuditLogInfo();
		},
		handleCurrentChange(val) {
			this.page.pageNum_ = val;
			this.getAuditLogInfo();
		},
		reset() {
			(this.condition.auditname = ""),
				(this.condition.operation = ""),
				(this.condition.user = ""),
				(this.condition.terminalip = ""),
				(this.condition.level = ""),
				(this.condition.profile = ""),
				(this.condition.operationtype = ""),
				(this.condition.startDate = ""),
				(this.condition.endDate = ""),
				this.submit();
		},
		submit() {
			this.getAuditLogInfo();
		},
		//取消对话框
		cancelDialog() {
			this.showDialog = false;
		}
	},
	mounted() {
		this.initOption();
	}
};
</script>
<style lang="scss" scoped>
</style>
